<template>
  <div>
    <!-- 搜索框开始 -->
    <div class="ssk">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-select clearable v-model="form.status" placeholder="选择设备状态">
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="待接单" value="待接单"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索框结束 -->
    <!-- 表格开始 -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="50px" align="center">
        </el-table-column>
        <el-table-column prop="engineer_name" label="工程名称" width="500px" align="center">
        </el-table-column>
        <el-table-column prop="device_name" label="设备名称" align="center">
        </el-table-column>
        <el-table-column prop="bill_why" label="问题描述" width="250px" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.status == '已完成'" effect="light" type="success">已完成</el-tag>
              <el-tag v-else-if="scope.row.status == '进行中'" effect="light" type="warning">进行中</el-tag>
              <el-tag v-else effect="light" type="danger">待接单</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="工单类型" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="操作" width="120" align="center">
          <template v-slot="scope">
            <div>
              <el-link :underline="false">
                <el-button type="text" @click="toDetails(scope.row.id)">详情</el-button>
                <el-dialog title="详情  " :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                  <span>
                    <div class="block">
                      <span class="demonstration">现场事故实时图片</span>
                      <el-carousel height="150px">
                        <el-carousel-item v-for="(item, index) in photoData" :key="index">
                          <img :src="item" alt="">
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                  </span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">拜 拜</el-button>
                  </span>
                </el-dialog>
                <!-- <el-link @click="toEdit(scope.row)" :underline="false" type="success">取消</el-link> -->
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="page" style="margin-top: 10px;">
      <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.page" :page-sizes="[5, 8, 10, 20]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { get } from '@/utils/request'

export default {
  data() {
    return {
      dialogVisible: false,
      input: '',
      // 表格数据源
      tableData: [],
      photoData: [],
      // 表单数据对象
      form: {},
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0
    };
  },
  computed: {},
  methods: {
    // 查询
    toSearch() {
      this.params.page = 1;
      this.gettableData();
    },
    async toDetails(id) {
      let res = await get('/workorder/findById', { id });
      // console.log(res,'9999');
      let temp = [];
      temp[0] = res.data.order[0].photo1;
      temp[1] = res.data.order[0].photo2;
      temp[2] = res.data.order[0].photo3;
      this.photoData = temp;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('现场照片看明白啦？确定要退出吗 亲')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 分页
    // 每页条数发生改变就会触发 
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`); //val 2条/页--->5条/页 val-->5
      this.params.pageSize = val;
      this.gettableData();
    },
    // 页码发生改变就会触发 
    handleCurrentChange(val) {
      // val表示就是页码 1-->3 
      // console.log(`当前页: ${val}`); 1 2 3
      this.params.page = val;
      // 重新查询数据 
      this.gettableData();
    },
    // 封装方法获取数据
    async gettableData() {
      // 查询
      let temp = {
        ...this.form,
        ...this.params
      };
      let res = await get('/workorder/pageQuery', temp);
      console.log(res, '8888');
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
  },
  created() {
    this.gettableData();
  },
  mounted() { },
};
</script>
<style scoped>
/* ::v-deep .el-link--inner {
  margin-left: 8px;
  font-size: 12px;
} */


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}



.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}



.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>